<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/static/home/css/reset.css">
    <link rel="stylesheet" href="/static/home/plug/layui/css/layui.css">
    <title>一码通</title>
    <script type="text/javascript" src="{__SGHOME_PATH}js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="{__SGHOME_PATH}js/qrcode.min.js"></script>
    <script type="text/javascript" src="{__SGHOME_PATH}js/vconsole.min.js"></script>
    <script src="/static/home/plug/layui/layui.js"></script>
    <script>
        var local_url="/static/admin/js/";
        var deviceWidth = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
        {if in_array($homeuser_info.user_id,[96005618,15014038])}
        var vConsole = new window.VConsole();
        {/if}
    </script>
    <script src="/static/admin/js/base.js"></script>
    <style>
        *{
            padding: 0; margin: 0; box-sizing: border-box;
        }
        body{
            background: #fff;
        }
        .codeContent{
            background: #fff; /*border-bottom: .15rem solid #f4f4f4;*/ text-align: center; padding: 0.62rem 0;
        }
        .top{
            width: 7.5rem; height: 3.35rem; text-align: center; padding-top: 0.74rem;
        }
        .logo{
            margin:0 auto 0.2rem; width: 1.1rem; height: 1.1rem;  box-sizing: content-box;
        }
        .logo img{
            width: 100%; height: 100%;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%; border: 1px solid #00BFFF;
        }
        .storeName{
            margin: .35rem auto;font-size: 0.34rem; color: #333333; font-weight: bolder;
        }
        .name{
            margin: 0 .85rem 0.2rem;font-size: 0.24rem; text-align: left; color: #FF5722; margin-top: 0.1rem;
        }
        .qr{
            padding: 6px; background: #fff; display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            width: 216px;
            box-shadow: 0px 0px 0.15rem 0.04rem rgba(224, 224, 224, 0.66); margin: 0 auto;
        }
        .qr img{
            /*width: 3.75rem;*/
            max-width: 100%; /* 确保图片不会超过容器宽度 */
            height: auto;
        }
        #qrcode img{
            /*width: 3.75rem;*/
            max-width: 100%; /* 确保图片不会超过容器宽度 */
            height: auto;
        }
        #qrcode canvas{
            /*width: 3.75rem;*/
            max-width: 100%; /* 确保图片不会超过容器宽度 */
            height: auto;
        }
        .qrtips{
            color: #00BFFF; font-size: 0.24rem; margin-top: 0.2rem; font-weight: bolder;
        }
        .list{
            font-size: 0.26rem; color: #666666; font-weight: 600; padding:0.2rem 0.42rem 0; width: 7.5rem; margin-bottom: 1.7rem;
        }
        .list div{
            width: 100%; margin-top: 0.22rem
        }
        .btn{
            margin-top: 0.15rem; display: flex; /*justify-content: space-around;*/ padding: 0 0.32rem; flex-wrap: wrap;
        }
        .btn a {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 0 0 25%;
            margin-bottom: 10px;
        }
        .btn img{
            cursor: pointer; width: 1.55rem; margin:0 0.7rem 0.3rem 1rem;
            border: 1px solid rgba(0,0,0,.1);
            border-radius: 15px;
        }
        .btn span{
            margin-bottom: 40px;
            text-align: center;
            font-size: 18px;
            font-weight: bolder;
            color: #333;
        }
    </style>
</head>
<body>

<input id="text" type="text" value="{$unifyqrcode}" style="display: none;" />
<div class="top">
    <div class="logo">
        <img src="{$homeuser_info.avatar_640}"/>
    </div>
    <div class="storeName">该二维码用于黄龙总部电梯及门禁出行</div>
    <div class="name">提醒：二维码请距离电梯刷卡器8-10公分，无黄色铃铛标志的一侧刷码更灵敏</div>
</div>
<div class="codeContent">
    <div class="qr" id="qrcode"></div>
    <div class="qrtips"><span style="font-size: 12px;color: #ccc;">每隔30秒自动刷新</span><span class="refresh" style="font-size: 14px;padding-left: 5px;">刷新</span></div>
</div>

<div class="btn">
    <a href="{:url('index/visitor')}"><img src="{__SGHOME_PATH}images/visitor_appointment.png" alt=""><span>&nbsp;&nbsp;&nbsp;访客邀约</span></a>
    <a href="{:url('index/face')}"><img src="{__SGHOME_PATH}images/face_door.png" alt=""><span>&nbsp;&nbsp;&nbsp;人脸识别</span></a>
</div>

</body>
<script type="text/javascript" src="{__SGHOME_PATH}js/h5-js-sdk-1.5.16.js"></script>
<script>
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 200,
        height : 200,
        correctLevel : QRCode.CorrectLevel.L
    });


    var hex_data = "{$ladderqrcodeinfo.hex_data}";

    function makeCode () {
        var elText = document.getElementById("text");
        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }
        qrcode.makeCode(elText.value);
        console.log(elText.value);
        console.log(hex_data);
        $("#qrcode canvas").removeAttr("style");
        $("#qrcode img").css("display","none")
    }

    function refreshCode() {
        $.ajax({
            url: "{:url('index/getqrcodeinfo')}",
            dataType: 'json',
            type:'get',
            data:{},
            success: function(drs){
                // console.log(drs);
                console.log(drs.data.unifyqrcode);
                hex_data = drs.data.hex_data;
                console.log(hex_data);
                // return false;
                var elText = document.getElementById("text");
                elText.value = drs.data.unifyqrcode;
                qrcode.makeCode(drs.data.unifyqrcode);
                $("#qrcode canvas").removeAttr("style");
                $("#qrcode img").css("display","none")
            },
            error: function(xml, errstr, err) {
                alert(errstr+'，获取数据失败！');
            }
        });
    }

    layui.use(['element', 'form', 'jquery', 'laydate', 'lucky'], function () {

        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var lucky = layui.lucky;

        if (!window.h5sdk) {
            console.log("invalid h5sdk");
        }
        else{
            window.h5sdk.config({
                appId: '{$parameters.appid}',
                timestamp: {$parameters.timestamp},
                nonceStr: '{$parameters.noncestr}',
                signature: '{$parameters.signature}',
                jsApiList: [
                    "tt.getSystemInfo",
                    "tt.showActionSheet",
                    "tt.previewImage",
                    "tt.showToast"
                ],
                //鉴权成功回调
                onSuccess: (res) => {
                    console.log(`config success: ${JSON.stringify(res)}`);
                },
                //鉴权失败回调
                onFail: (err) => {
                    console.log(`config failed: ${JSON.stringify(err)}`);
                },
            });
            window.h5sdk.ready(() => {
                tt.setScreenBrightness({
                    "value": 1,
                    success(res) {
                        console.log(JSON.stringify(res));
                    },
                    fail(res) {
                        console.log(`setScreenBrightness fail: ${JSON.stringify(res)}`);
                    }
                });
            });
        }

        makeCode();
        $("#qrcode canvas").removeAttr("style");
        $("#qrcode img").css("display","none");
        var timerID = setInterval(function(){
            // location.reload();
            refreshCode();
        }, 30000);
        $(".refresh").on('click',function (){
            refreshCode();
        });

    });
</script>
<!-- Matomo -->
<script>
    var _paq = window._paq = window._paq || [];
    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
    _paq.push(["setDocumentTitle", document.title]);
    _paq.push(['setUserId', '{$homeuser_info.user_id}']);
    _paq.push(['setCustomDimension', 1, 'H5']);
    _paq.push(['setCustomDimension', 2, 'H5']);
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    _paq.push(['enableHeartBeatTimer']);
    (function() {
        var u="https://tracking.gtcloud.cn/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '1029']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
</script>
<!-- End Matomo Code -->

</html>